<template>
	<view>
		<!-- 滑动渲染方式 -->
		<view class="goodsList slideMod">
      <uni-swiper-dot class="uni-swiper-dot-box" :class="navInfo.navName == '免税专供' ? 'dutyFree' : ''" :current="outSwiperCurrent" :mode="mode" :dots-styles="dotsStyles">
      	<swiper class="swiper-container" interval="2000" duration="500" next-margin='20rpx' acceleration='true' circular='true' @change='swiperChange' :current="outSwiperCurrent" indicator-dots="true" indicator-active-color="#862633" indicator-color="#CBCACF">
      		<swiper-item class="itemGoods" v-for="(item, index) in list" :key="index" @click.stop="enterProduct(item, index)"  v-if="index <= 4">
      			<view class="gImg">
      			  <image mode="widthFix" v-if="navInfo.navName == '免税专供'" :src="item.listImgSecondUrl || item.listImgUrl || item.imgUrl"></image>
              <image mode="widthFix" v-else :src="item.hoverUrl || item.majorUrl"></image>
            </view>
            <view class="gTitle">
              <block v-if="navInfo.foreignId == 0">
                <block v-if="!!item.itemAssistantTitle && !!item.itemThirdTitle">
                  <view class="ell">{{item.itemAssistantTitle}}</view>
                  <view class="ell">{{item.itemThirdTitle}}</view>
                </block>
                <block v-else>
                  <view class="ell2">{{item.itemName}}</view>
                </block>
              </block>
              <block v-else>
                <block v-if="!!item.subtitle && item.subtitle.indexOf(',') !== -1">
                  <view class="ell">{{filterChecked.subTitleFormat(item.subtitle, 0)}}</view>
                  <view class="ell">{{filterChecked.subTitleFormat(item.subtitle, 1)}}</view>
                </block>
                <block v-else>
                  <view class="ell2">{{item.itemName}}</view>
                </block>
              </block>
            </view>
            <view class="gCapacity" :class="!!item.valueName || !!item.specification ? '' : 'trans'">
              容量:{{item.valueName || item.specification}}
            </view>
            <view class="gPrice" v-if="!!item.price">
              <label class="rmb">¥</label>{{filterChecked.moneyFormat(item.price / 1, 2)}}
            </view>
            <view class="gBtn" v-if="navInfo.navName == '不凡甄选'">
              <block v-if="!!item.activitySelection">
                {{item.activitySelection.joinStatus == '开放登记信息' ? '点击登记' : item.activitySelection.joinStatus == '结果已公布' ? '即刻选购' : '查看详情'}}
              </block>
              <block v-else>
                {{item | btnText}}
              </block>
            </view>
            <view class="gBtn" v-else>
              {{ navInfo | btnTextElse(item)}}
            </view>
          </swiper-item>
        </swiper>
      </uni-swiper-dot>
    </view>
  </view>
</template>
<script module="filterChecked" lang="wxs" src="../../utils/filter.wxs"></script>
<script>
  import {
    reportEvent,
    getEventIdByNavName,
    EVENT_ID
  } from '@/utils/ab-test.js';
  export default {
    // name:"itemsSlideslipNew",
    props: {
      list: Array,
      navInfo: Object
    },
    data() {
      return {
        outSwiperCurrent: 0,
        dotStyle: [{
            backgroundColor: 'rgba(0, 0, 0, .3)',
            border: '1px rgba(0, 0, 0, .3) solid',
            color: '#fff',
            selectedBackgroundColor: 'rgba(0, 0, 0, .9)',
            selectedBorder: '1px rgba(0, 0, 0, .9) solid'
          },
          {
            backgroundColor: 'rgba(255, 90, 95,0.3)',
            border: '1px rgba(255, 90, 95,0.3) solid',
            color: '#fff',
            selectedBackgroundColor: 'rgba(255, 90, 95,0.9)',
            selectedBorder: '1px rgba(255, 90, 95,0.9) solid'
          },
          {
            backgroundColor: 'rgba(83, 200, 249,0.3)',
            border: '1px rgba(83, 200, 249,0.3) solid',
            color: '#fff',
            selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
            selectedBorder: '1px rgba(83, 200, 249,0.9) solid'
          }
        ],
        modeIndex: -1,
        styleIndex: -1,
        current: 0,
        mode: 'default',
        dotsStyles: {
          backgroundColor: 'rgba(83, 200, 249,0.3)',
          border: '1px rgba(83, 200, 249,0.3) solid',
          color: '#fff',
          selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
          selectedBorder: '1px rgba(83, 200, 249,0.9) solid'
        },
      };
    },
    filters: {
      btnText(item) {
        let frontCustomParameters = item?.frontCustomParameters ? JSON.parse(item.frontCustomParameters) : {}
        let text;
        if (frontCustomParameters?.intentCheckMark && !frontCustomParameters?.privateSaleMark && item.frontQty < 1) {
          text = '意向登记'
        } else {
          text = '查看详情'
        }
        return text
      },
      btnTextElse(navInfo, item) {
        let text;
        if (navInfo.navName == '免税专供') {
          text = '查看详情'
        } else {
          let frontCustomParameters = item?.frontCustomParameters ? JSON.parse(item.frontCustomParameters) : {};

          if (frontCustomParameters?.intentCheckMark && !frontCustomParameters?.privateSaleMark && item.frontQty < 1) {
            text = '意向登记'
          } else {
            text = '即刻选购'
          }
        }
        return text
      }
    },
    methods: {
      enterProduct(item, index) {
        this.$commonSensors.PLPProductClick(item, index, this.navInfo.navName)
				reportEvent(EVENT_ID.CATEGORY.SHANG_CHENG);
        reportEvent(getEventIdByNavName(this.navInfo.navName));
        let path = this.navInfo.navName == "免税专供" ? '/pages/GTR/item?id=' + item.id : '/pages/item/item?id=' + item
          .itemId + '&valueId=' + item.valueId + '&hasExpose=true'
        uni.navigateTo({
          url: path
        })
      },
      swiperChange(e) {
        let current = e.target.current;
        this.outSwiperCurrent = current;
      },
    }
  }
</script>

<style lang="less">
  .ell {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .ell2 {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .uni-swiper-dot-box {
    width: 100%;
    height: 738rpx;
    overflow: hidden;
  }

  .swiper-container {
    width: 100%;
    height: 738rpx;
  }

  .uni-swiper-dot-box.dutyFree {
    // height: 722rpx;
    height: 761rpx;

    .swiper-container {
      height: 696rpx;
      // height: 652rpx;
    }
  }

  .itemGoods {
    width: 406rpx !important;
    height: 712rpx !important;
    box-sizing: content-box;
    border-right: 15rpx #f6f5f3 solid;
    margin: 0 !important;
    box-sizing: border-box;

    /* padding-right: 20rpx; */
    /* margin-right: 20rpx; */
    /* width: 320rpx !important; */
    .gImg {
      width: 406rpx;
      height: 406rpx;
      overflow: hidden;
    }
  }

  uni-swiper .uni-swiper-dot {
    display: inline-block;
    width: 14px !important;
    height: 4px !important;
    cursor: pointer;
    -webkit-transition-property: background-color;
    transition-property: background-color;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
    background: rgba(255, 255, 255, .3);
    border-radius: 5px !important
  }

  uni-swiper .uni-swiper-dot-active {
    width: 20px !important;
    background-color: #fff !important;
  }

  .uni-swiper-dot {
    width: 42rpx !important;
    height: 4rpx !important;
    border-radius: 0 !important;
    margin-left: -20rpx !important;
  }

  .uni-swiper-dots {
    display: flex;
    justify-content: center;
  }

  .uni-swiper-dots.uni-swiper-dots-horizontal {
    margin-bottom: 20px !important;
  }

  .gPrice {
    .rmb {
      font-size: 28rpx;
      margin-right: 4rpx;
    }
  }

  .trans {
    opacity: 0;
  }
</style>
